<template>
	<view class="wrap">
		<view class="dev-area">

			<view class="dev-card">
				<view class="">
					<view class="dev-name">温度</view>
					<image class="dev-logo" src="/static/temp.png" mode=""></image>
				</view>
				<view class="dev-data">{{temp}} ℃</view>
			</view>
			<view class="dev-card">
				<view class="">
					<view class="dev-name">湿度</view>
					<image class="dev-logo" src="/static/humi.png" mode=""></image>
				</view>
				<view class="dev-data">{{humi}} %</view>
			</view>
			<!-- <view class="dev-card">
				<view class="">
					<view class="dev-name">灯</view>
					<image class="dev-logo" src="/static/lamp.png" mode=""></image>
				</view>
				<switch :checked="led" @change="onLedSwitch" color="#2b9939"/>
			</view> -->
			<view class="dev-card" @click="gotoMedicineDetail1">
				<view class="">
					<view class="dev-name">药品1</view>
					<image class="dev-logo" src="/static/yao.png"></image>
				</view>
				<view class="dev-data">{{med1}}</view>
			</view>
			<view class="dev-card" @click="gotoMedicineDetail2">
				<view class="">
					<view class="dev-name">药品2</view>
					<image class="dev-logo" src="/static/yao.png"></image>
				</view>
				<view class="dev-data">{{med2}}</view>
			</view>
			<view class="dev-card" @click="gotoMedicineDetail3">
				<view class="">
					<view class="dev-name">药品3</view>
					<image class="dev-logo" src="/static/yao.png"></image>
				</view>
				<view class="dev-data">{{med3}}</view>
			</view>
			<view class="dev-card" @click="gotoMedicineDetail4">
				<view class="">
					<view class="dev-name">药品4</view>
					<image class="dev-logo" src="/static/yao.png"></image>
				</view>
				<view class="dev-data">{{med4}}</view>
			</view>

			<view class="dev-card">
				<view class="">
					......
				</view>
			</view>

		</view>

	</view>

</template>

<script>
	const {
		createCommonToken
	} = require('@/key.js')
	export default {
		data() {
			return {
				temp: '',
				humi: '',
				//led: false,
				med1: '',
				token: '',
				switch_flag: 0, //标记开关操作
			}
		},
		onLoad() {
			const params = {
				author_key: '5mNCPyxsuoG7R5LWGNvm70PEoE6pfvMn1LNxMuY2TPjd2UNtQR/FjLMfxUrhLpGg',
				version: '2022-05-01',
				user_id: '427477',
			}
			this.token = createCommonToken(params);
		},
		onShow() {
			this.fetchDevData();
			setInterval(() => {
				this.fetchDevData();
			}, 3000) //最好放到onLoad里
		},
		methods: {
			fetchDevData() {
				uni.request({
					url: 'https://iot-api.heclouds.com/thingmodel/query-device-property', //仅为示例，并非真实接口地址。
					method: 'GET',
					data: {
						product_id: 'J6N06W2oo1',
						device_name: 'SmartPillbox'
					},
					header: {
						'authorization': this.token //自定义请求头信息
					},
					success: (res) => {
						console.log(res.data);
						console.log(res.data.data[6].value);
						this.temp = res.data.data[15].value;
						this.humi = res.data.data[6].value;
						this.med1 = res.data.data[7].value;
						this.fuyong1 = res.data.data[2].value;
						this.take1 = res.data.data[11].value;
						
						this.med2 = res.data.data[8].value;
						this.fuyong2 = res.data.data[3].value;
						this.take2 = res.data.data[12].value;
						
						this.med3 = res.data.data[9].value;
						this.fuyong3 = res.data.data[4].value;
						this.take3 = res.data.data[13].value;
						
						this.med4 = res.data.data[10].value;
						this.fuyong4 = res.data.data[5].value;
						this.take4 = res.data.data[14].value;

					}
				});
			},

			gotoMedicineDetail1() {
				uni.navigateTo({
					url: `/pages/medicine-detail/medicine-detail1?med=${encodeURIComponent(this.med1)}&times=${this.fuyong1}&dosage=${this.take1}`,
					animationType: 'slide-in-right',
					animationDuration: 300
				});
			},
			
			gotoMedicineDetail2() {
				uni.navigateTo({
					url: `/pages/medicine-detail/medicine-detail2?med=${encodeURIComponent(this.med2)}&times=${this.fuyong2}&dosage=${this.take2}`,
					animationType: 'slide-in-right',
					animationDuration: 300
				});
			},
			
			gotoMedicineDetail3() {
				uni.navigateTo({
					url: `/pages/medicine-detail/medicine-detail3?med=${encodeURIComponent(this.med3)}&times=${this.fuyong3}&dosage=${this.take3}`,
					animationType: 'slide-in-right',
					animationDuration: 300
				});
			},
			
			gotoMedicineDetail4() {
				uni.navigateTo({
					url: `/pages/medicine-detail/medicine-detail4?med=${encodeURIComponent(this.med4)}&times=${this.fuyong4}&dosage=${this.take4}`,
					animationType: 'slide-in-right',
					animationDuration: 300
				});
			}
			
		}
	}
</script>

<style>
	.wrap {
		padding: 30rpx;
	}

	.dev-area {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.dev-card {
		height: 150rpx;
		width: 320rpx;
		border-radius: 30rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-shadow: 0 0 15rpx #ccc;
	}

	.dev-name {
		font-size: 20rpx;
		text-align: center;
		color: #6d6d6d;
	}

	.dev-logo {
		width: 70rpx;
		height: 70rpx;
		margin-top: 10rpx;
	}

	.dev-data {
		font-size: 50rpx;
		color: #6d6d6d;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	/* 新增输入框样式 */
	.input-area {
		position: relative;
		display: flex;
		align-items: center;
	}

	.dev-data-input {
		font-size: 40rpx;
		color: #2b9939;
		border-bottom: 2rpx solid #eee;
		padding-right: 40rpx;
		width: 150rpx;
		text-align: center;
	}

	.edit-icon {
		position: absolute;
		right: 0;
		font-size: 30rpx;
		color: #999;
	}
</style>